<template>
  <div class="app-container">
    <div class="mainbox">
      <div class="filter-container">
        <el-form ref="filterFormRef" :inline="true" :model="filterForm">
          <el-form-item label="交易时间" prop="tradeTime">
            <el-date-picker
              v-model="filterForm.tradeTime"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="业务系统" prop="systemId">
            <el-select v-model.trim="filterForm.systemId" placeholder="请选择业务系统">
              <el-option
                v-for="(item) in systemList"
                :key="item.systemId"
                :label="item.systemName"
                :value="item.systemId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="商户订单号" prop="orderId">
            <el-input v-model.trim="filterForm.orderId" placeholder="请输入商户订单号"></el-input>
          </el-form-item>
          <el-form-item label="退款状态" prop="refundSts">
            <el-select v-model.trim="filterForm.refundSts" placeholder="请选择退款状态">
              <el-option label="全部" value="" />
              <el-option label="待退款" value="U" />
              <el-option label="退款成功" value="S" />
              <el-option label="退款失败" value="F" />
              <el-option label="发送第三方超时" value="T" />
              <el-option label="已撤销" value="C" />
            </el-select>
          </el-form-item>
          <el-form-item label="商户名称" prop="merchantName">
            <el-select
              v-model="filterForm.merchantName"
              filterable
              remote
              reserve-keyword
              placeholder="（查询搜索框）"
              :remote-method="remoteMethod"
              :loading="selectLoading">
              <el-option
                v-for="item in merchantOptions"
                :key="item.id"
                :label="item.merchantName"
                :value="item.merchantName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="flex-1" />
        <el-button type="primary" @click="handleFilter">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
      <dt-table
        ref="dtTable"
        class="refund-table"
        v-loading="loading"
        :table-opts="tableOpts"
        row-key="id"
        :pagination-data="{
          total: total,
          queryParams: filterForm
        }"
        @pagination="getList"
        @selection-change="selectionChange"
      >
        <template #toolbarBtn>
          <my-dialog-column
            :query="queryInfo"
            :columns="columns"
            @exportStart="startExport"
            @queryTable="getList"
          />
        </template>
      </dt-table>
    </div>
    <myDtDetail ref="dtDetailRef" :dt-detail-option="detailOption"/>
  </div>
</template>

<script>
import { qryUserSystemAuth } from '@/api/unifiedPayment/tradeQuery'
import { qryAuthMerchantByName as qryMerchantByName } from '@/api/unifiedPayment/merchantMange'
import { getPage } from '@/api/unifiedPayment/refundQuery'
import myDialogColumn from '../components/dialog-column/index.vue'
import myDtDetail from '../components/dt-detail'

const CHN_SELECT = {
  '1': '银行卡渠道',
  '2': '扫码渠道',
  '3': '手机APP渠道'
}
const TXN_STS_SELECT = {
  'U': '待退款',
  'S': '退款成功',
  'F': '退款失败',
  'T': '发送第三方超时',
  'C': '已撤销'
}
export default {
  components: { myDialogColumn, myDtDetail },
  provide: {
    showOptArr: [
      'exportFile'
    ]
  },
  data() {
    return {
      total: 0,
      filterForm: {
        tradeTime: [],
        beginTxnTime: '',
        endTxnTime: '',
        systemId: '',
        orderId: '',
        merchantName: '',
        refundSts: '',
        pageNo: 1,
        pageSize: 10
      },
      systemList: [],
      merchantOptions: [],
      tableOpts: {
        rowKey: 'systemId',
        toolbarBtn: [],
        tableData: [],
        firstTableCol: {
          select: true
        },
        indexTableCol: {
          index: true
        },
        tableCol: [
          {
            prop: 'orderId',
            label: '商户订单号',
            show: true
          },
          {
            prop: 'txnSqn',
            label: '支付流水号',
            show: true
          },
          {
            prop: 'refundSqn',
            label: '退款流水号',
            show: true
          },
          {
            prop: 'refundTime',
            label: '退款时间',
            width: 160,
            show: true
          },
          {
            prop: 'systemName',
            label: '业务系统',
            show: true
          },
          {
            prop: 'merchantName',
            label: '商户名称',
            show: true
          },
          {
            prop: 'chn',
            label: '退款渠道',
            show: true,
            formatter: (row) => {
              return CHN_SELECT[row.chn]
            }
          },
          {
            prop: 'refundSts',
            label: '退款状态',
            show: true,
            formatter: (row) => {
              return TXN_STS_SELECT[row.refundSts]
            }
          },
          {
            prop: 'refundAmt',
            label: '退款金额(元)',
            show: true,
            formatter: (row) => {
              return row.refundAmt == 0 ? '0' : row.refundAmt
            }
          }
        ],
        operator: {
          // width: 292,
          operatorBtn: [
            {
              text: '详情',
              permission: ['REFUND_QUERY_DETAIL_BUTTON'],
              size: 'small',
              click: (row, col, cellValue) => { return this.viewInfo(row) }
            }
          ]
        }
      },
      loading: false,
      selectLoading: false,
      selectionRow: [],
      columns: [
        {
          prop: 'orderId',
          label: '商户订单号',
          show: true,
          template: true
        },
        {
          prop: 'txnSqn',
          label: '支付流水号',
          show: true,
          template: true
        },
        {
          prop: 'refundSqn',
          label: '退款流水号',
          show: true,
          template: true
        },
        {
          prop: 'refundTime',
          label: '退款时间',
          show: true,
          template: true
        },
        {
          prop: 'systemName',
          label: '业务系统',
          show: true,
          template: true
        },
        {
          prop: 'merchantName',
          label: '商户名称',
          show: true,
          template: true
        },
        {
          prop: 'chn',
          label: '退款渠道',
          show: true,
          template: true,
          formatter: (row) => {
            return CHN_SELECT[row.chn]
          }
        },
        {
          prop: 'refundSts',
          label: '退款状态',
          show: true,
          template: true,
          formatter: (row) => {
            return TXN_STS_SELECT[row.refundSts]
          }
        },
        {
          prop: 'refundAmt',
          label: '退款金额(元)',
          show: true,
          template: true
        }
      ],
      queryInfo: {
        menu: '交易查询',
        url: '/unifiedPayment/payRefundInfo/list',
        params: {},
        method: 'GET',
        selection: ''
      },
      fullLoading: null
    }
  },
  computed: {
    pickerOptions() {
      return {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    },
    detailOption() {
      return {
        labelWidth: '140px',
        width: '800px',
        column: 2,
        rows: [
          {
            prop: 'orderId',
            label: '商户订单号',
            show: true
          },
          {
            prop: 'txnSqn',
            label: '支付流水号',
            show: true
          },
          {
            prop: 'refundSqn',
            label: '退款流水号',
            show: true
          },
          {
            prop: 'refundTime',
            label: '退款时间',
            show: true
          },
          {
            prop: 'systemName',
            label: '业务系统',
            show: true
          },
          {
            prop: 'merchantName',
            label: '商户名称',
            show: true
          },
          {
            prop: 'chnStr',
            label: '退款渠道',
            show: true
          },
          {
            prop: 'refundStsStr',
            label: '退款状态',
            show: true
          },
          {
            prop: 'refundAmtStr',
            label: '退款金额（元）',
            show: true
          }
        ],
        data: {}
      }
    }
  },
  mounted() {
    this.refresh()
    qryUserSystemAuth().then((res) => {
      this.systemList = res.data
    })
  },
  methods: {
    startExport(type) {
      if (!type) {
        this.fullLoading = this.$loading({
          lock: true,
          text: '正在导出...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
      } else {
        this.fullLoading && this.fullLoading.close()
      }
    },
    refresh() {
      this.getList()
    },
    selectionChange(val) {
      this.selectionRow = val
      this.queryInfo.selection = val.map((item) => item.id)
      this.queryInfo.idProp = 'id'
    },
    viewInfo(row) {
      row.chnStr = CHN_SELECT[row.chn]
      row.refundStsStr = TXN_STS_SELECT[row.refundSts]
      row.refundAmtStr = row.refundAmt == 0 ? '0' : row.refundAmt
      this.detailOption.data = row
      this.$refs.dtDetailRef.dialogVisible = true
    },
    // 搜索
    handleFilter() {
      this.filterForm.pageNo = 1
      if (this.filterForm.tradeTime.length > 0) {
        this.filterForm.beginTxnTime = this.filterForm.tradeTime[0]
        this.filterForm.endTxnTime = this.filterForm.tradeTime[1]
      } else {
        this.filterForm.beginTxnTime = ''
        this.filterForm.endTxnTime = ''
      }
      this.getList()
    },
    // 重置
    handleReset() {
      this.$refs.filterFormRef.resetFields('filterForm')
      this.handleFilter()
    },
    remoteMethod(query) {
      if (query !== '') {
        this.selectLoading = true
        qryMerchantByName(query).then((res) => {
          this.selectLoading = false
          this.merchantOptions = res.data
        })
      } else {
        this.merchantOptions = []
      }
    },
    getList() {
      this.loading = true
      getPage(this.filterForm).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.refund-table {
  ::v-deep .flex-1 {
    display: none;
  }
  ::v-deep .table-opt-container {
    justify-content: flex-end;
  }
}
</style>
